<template>
  <div class="app-container">
    <div class="companyIndex">
      <div class="left_sidebar">
        <!-- <div class="customer_service">
          <div class="left_box">
            <div class="portrait">
              <img src="" alt="" />
            </div>
            <div>
              <span class="text_1">暂未分配客服</span>
              <a href="#" class="text_2" @click="complaintDialog = true"
                >我要投诉>></a
              >
            </div>
          </div>
          <div class="right_box"></div>
        </div> -->
        <el-card style="padding-top: 20px; background-color: #fff">
          <div class="card">
            <div class="cardItem i1" @click="receive_express">
              <div class="i_num">{{ searchHomeDataList.interviewCount }}</div>
              <div class="i_title">收到投递</div>
            </div>
            <div class="cardItem i2" @click="myDownload">
              <div class="i_num">{{ searchHomeDataList.downloadCount }}</div>
              <div class="i_title">我的下载</div>
            </div>
            <div class="cardItem i3" @click="interview">
              <div class="i_num">{{ searchHomeDataList.deliveryCount }}</div>
              <div class="i_title">面试邀请</div>
            </div>
            <div class="cardItem i4" @click="collect">
              <div class="i_num">{{ searchHomeDataList.collectCount }}</div>
              <div class="i_title">我的收藏</div>
            </div>
            <div class="cardItem i5" @click="browsing_History">
              <div class="i_num">{{ searchHomeDataList.viewCount }}</div>
              <div class="i_title">浏览记录</div>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <div class="talent-recommendation">
            <div class="recommend">
              <div class="recommend_title">
                人才推荐
                <span class="t_sub"> 根据您所选职位推荐人才</span>
              </div>
              <div class="recommend_select">
                选择职位：
                <el-select
                  v-model="companyRecommendQuery.jobId"
                  width="30%"
                  placeholder="请选择职位"
                  size="small"
                  clearable
                  @change="getCompanyRecommendList"
                >
                  <el-option
                    v-for="item in positionSelect"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>

            <el-row :gutter="20">
              <el-col
                :xs="24"
                :sm="12"
                :md="8"
                :lg="6"
                v-for="candidate in intelligenceTjList"
                :key="candidate.id"
              >
                <el-card class="candidate-card" shadow="hover">
                  <div
                    class="recommend_item_con"
                    @click="resumeClick(candidate)"
                  >
                    <div class="recommend_item_title">
                      <div class="recommend_item_img">
                        <div class="item_img">
                          <img :src="candidate.photoImgSrc" alt="" />
                        </div>
                        <div class="item_text">
                          <div class="fn_bar">
                            <el-link
                              :href="candidate.resume_link_url_web"
                              target="_blank"
                              >{{ candidate.fullname }}</el-link
                            >
                            <div class="clear"></div>
                          </div>
                          <div class="title">
                            {{ candidate.ageText }}，{{
                              candidate.experienceText
                            }}经验，{{ candidate.educationText }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="recommend_item_information substring">
                      <span>想找</span>
                      <span> {{ candidate.expectCategoryText }}</span>
                      <span>工作</span>
                    </div>
                    <div class="recommend_item_welfare substring">
                      <span>想在</span>
                      {{ candidate.expectDistrictText }}
                      <span>工作</span>
                    </div>
                    <div class="recommend_item_company">
                      {{ candidate.currentText }}
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="8">
              <h3 class="chart-title">
                <img src="@/assets/common/招聘统计.png" alt="" />
                招聘效果统计
              </h3>
            </el-col>
            <el-col :span="12">
              <div class="chart-legend">
                <span class="legend-item">
                  <i class="el-icon-circle-check" style="color: #409eff"></i>
                  职位浏览
                </span>
                <span class="legend-item">
                  <i class="el-icon-circle-check" style="color: #f56c6c"></i>
                  应聘统计
                </span>
              </div>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="chatJobList.jid"
                placeholder=""
                clearable
                @change="getChatJobList"
              >
                <el-option
                  v-for="item in positionSelect"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div ref="chartContainer" style="height: 400px"></div>
        </el-card>
      </div>
      <div class="right_sidebar">
        <!-- <div class="integral_con">
          <div class="integral">
            <div class="ic_txt">我的积分：1090</div>
            <div class="ic_tip" @click="my_points">做任务赚积分</div>
          </div>
          <div class="signIn">
            <el-button type="primary" class="integral_btn" disabled round
              >已签到</el-button
            >
          </div>
        </div> -->
        <div class="right_cb">
          <div class="c_name_b">
            <div class="c_name substring">
              <a href="#" @click="basicDataClick">{{
                searchHomeDataList.companyName
              }}</a>
            </div>
          </div>
          <div class="c_bd">
            <div class="b_cell tel">手机已认证</div>
            <div class="b_cell wx">微信未绑定</div>
            <div class="clear"></div>
          </div>
          <div class="c_btn">
            <div class="adb" @click="position_manage">发布职位</div>
            <div class="adj" @click="refresh">刷新职位</div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能推荐 -->
    <el-dialog
      :visible.sync="znVisible"
      width="width"
      style="height: 100%"
      custom-class="resume-dialog"
      :show-close="true"
    >
      <div class="resume-container">
        <!-- 头部信息 -->
        <div class="header">
          <div class="avatar-info">
            <img
              class="avatar"
              :src="znRecommendDialog.photoImgSrc"
              alt="avatar"
            />
            <div class="basic-info">
              <div class="name-row">
                <span class="name">{{ znRecommendDialog.fullname }}</span>
                <span class="tag">昨日活跃</span>
                <span>{{ znRecommendDialog.ageText }}</span>
                <span>{{ znRecommendDialog.experienceText }}</span>
                <span>{{ znRecommendDialog.educationText }}</span>
              </div>
              <div class="status">
                求职状态：{{ znRecommendDialog.currentText }}
              </div>
            </div>
          </div>
          <div class="actions">
            <!-- <i
              class="el-icon-star-off"
              @click="toggleStar"
              :class="{
                'el-icon-star-on': isStarred,
                'el-icon-star-off': !isStarred,
              }"
            ></i> -->
            <span
              class="fav"
              @click="toggleStar"
              :class="{
                'fav-uncollected': personDetail.collectStatus === 0,
                'fav-collected': personDetail.collectStatus,
              }"
            ></span>
            <!-- <div>
              {{ isStarred }}
              {{ personDetail.collectStatus }}
            </div> -->
            <!-- <i class="el-icon-share"></i> -->
          </div>
        </div>

        <!-- 求职意向 -->
        <div class="section">
          <div class="title">求职意向</div>
          <div class="content">
            <div class="item">
              <span>期望职位：</span>
              <span>{{ znRecommendDialog.expectCategoryText }}</span>
            </div>
            <div class="item">
              <span>期望地区：</span>
              <span>{{ znRecommendDialog.expectDistrictText }}</span>
            </div>
            <div class="item">
              <span>期望薪资：</span>
              <span>{{ znRecommendDialog.expectWageText }}</span>
            </div>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="section">
          <div class="title">联系方式</div>
          <div class="content">
            <div class="contact-row">
              <strong>手机号：{{ personDetail.mobile }}</strong>
              <strong>微信号：{{ personDetail.weixin }}</strong>
            </div>
            <div class="contact-tip">
              联系我时，请说是在北仑人才招聘上看到的，谢谢！
            </div>
          </div>
          <!-- <div class="contact_wapper">
            <div class="">{{ znRecommendDialog.mobile }}</div>
          </div> -->
        </div>

        <!-- 自我描述 -->
        <div class="section">
          <div class="title">自我描述</div>
          <div class="content">
            {{ personDetail.specialty || "这个人很懒,暂未填写自我描述.." }}
          </div>
        </div>

        <!-- 工作经历 -->
        <div class="section">
          <div class="title">工作经历</div>
          <div class="content">
            <div
              class="work-item"
              v-for="item in personDetail.resumeWorkList"
              :key="item.id"
            >
              <div class="work-header">
                <div class="company-info">
                  <span class="company-name">{{ item.companyname }}</span>
                  <span class="separator">|</span>
                  <span class="position">{{ item.jobName }}</span>
                </div>
                <div class="date">
                  {{ item.starttime | dateFormats }} -
                  {{ item.endtime | dateFormats }}
                </div>
              </div>
              <div class="work-content">
                <div class="duty-title">岗位职责：</div>
                <p class="duty-content">{{ item.duty }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 附件简历 -->
        <!-- <div class="section">
          <div class="title">附件简历</div>
          <div class="content">
            <el-link type="primary">简历.pdf</el-link>
          </div>
        </div> -->

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <!-- <div class="left-actions">
            <el-button size="small" icon="el-icon-download">导出</el-button>
            <el-button size="small" icon="el-icon-printer">打印</el-button>
            <el-button size="small" icon="el-icon-warning">举报</el-button>
          </div> -->
          <div class="right-actions">
            <!-- <el-button size="small">聊一聊</el-button> -->
            <el-button
              v-if="personDetail.downloadStatus"
              type="success"
              @click="interviewYqClick(item)"
              >面试邀请</el-button
            >
            <el-button v-else type="success" @click="downloadResume"
              >下载简历</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 我要投诉 -->
    <el-dialog
      title="投诉客服"
      :visible.sync="complaintDialog"
      width="25%"
      center
      class="complaint"
    >
      <el-alert title="" type="warning" style="margin-bottom: 20px"
        >为了更好地为您提供高质量的服务，请您如实反馈具体情况，我们会第一时间给您答复！</el-alert
      >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="投诉内容">
          <el-input placeholder="" type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary">确定</el-button>
        <el-button @click="complaintDialog = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 面试邀请弹框 -->
    <el-dialog
      title="面试邀请"
      :visible.sync="interviewYqVisible"
      width="500px"
      custom-class="interview-dialog"
    >
      <el-form
        :model="InterrviewForm"
        :rules="rules"
        ref="interviewForm"
        label-width="80px"
        class="interview-form"
      >
        <!-- 面试形式 -->
        <el-form-item label="面试形式">
          <el-radio-group v-model="InterrviewForm.type">
            <el-radio :label="1">面试邀请</el-radio>
            <el-radio :label="2" disabled>视频面试</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 面试人 -->
        <el-form-item label="面试人" prop="fullname">
          <span class="candidate-name">{{ znRecommendDialog.fullname }}</span>
        </el-form-item>

        <!-- 面试职位 -->
        <el-form-item label="面试职位" prop="jobid">
          <el-select v-model="InterrviewForm.jobid" placeholder="请选择职位">
            <el-option
              v-for="item in positionSelect"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 面试日期 -->
        <el-form-item label="面试日期" prop="interviewDate">
          <el-date-picker
            v-model="InterrviewForm.interviewDate"
            @change="handleDateChange"
            type="date"
            placeholder="请选择面试日期"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 面试时间 -->
        <el-form-item label="面试时间" prop="interviewTime">
          <el-time-select
            v-model="InterrviewForm.interviewTime"
            @change="handleInterviewTime"
            :picker-options="{
              start: '08:00',
              step: '00:10',
              end: '20:00',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
        </el-form-item>

        <!-- 面试地点 -->
        <el-form-item label="面试地点" prop="address">
          <el-input
            v-model="InterrviewForm.address"
            placeholder="请输入面试地点"
          ></el-input>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人" prop="contact">
          <el-input
            v-model="InterrviewForm.contact"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="tel">
          <el-input
            v-model="InterrviewForm.tel"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="InterrviewForm.note"
            type="textarea"
            :rows="3"
            placeholder="请填写备注"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="interviewYqVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  selHomeNoticeByCIdApi,
  selCompanyMessageByUidApi,
  selCompanyAuditByCidApi,
  selHomeMessageByUidApi,
  selHomeResultCountByIdApi,
  selIfNewResumeDetailsByCidApi,
} from "@/api/homePage";
import { positionListApi } from "@/api/position";
import {
  companyRecommendListApi,
  selResumeDetailsByIdApi,
} from "@/api/intelligence";
import {
  resumeSaveApi,
  addCollectApi,
  delCollectApi,
  selRemarkByCidAndRidApi,
  selCompanyContentListApi,
  addInterviewApi,
} from "@/api/jlManage";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // 招聘统计
      chatJobList: {
        uid: "",
        jid: "",
      },
      baseUrl: "https://blwcompany.nbblmc.cn",
      complaintDialog: false,
      selectedPeriod: "全部",
      positionSelectValue: "",
      // 首页请求
      homePageQuery: {
        page: 1,
        pagesize: 10,
        uid: "",
      },
      // 招聘效果统计数据
      hireList: [],
      hireLists: [],
      // 查询请求首页数据
      searchHomeDataQuery: {
        companyId: "",
        uid: "",
      },
      // 企业id查询首页数据
      searchHomeDataList: {},
      // 职位id查询首页数据
      selHomeResultCountQuery: {
        uid: "",
        jid: "",
      },
      // 新增收藏参数
      addCollectQuery: {
        companyUid: "",
        resumeId: "",
      },
      // 删除收藏参数
      delCollectQuery: {
        uid: "",
        rid: "",
      },
      // 简历保存参数
      resumeSave: {
        uid: "",
        rid: "",
      },
      uid:'',
      // 收藏
      isStarred: false,
      // 企业信息详情
      details: {},
      periodOptions: [
        { value: "全部", label: "全部" },
        { value: "最近7天", label: "最近7天" },
        { value: "最近30天", label: "最近30天" },
      ],
      chart: null,
      formattedArray: [],
      // 职位列表
      positionQuery: {
        audit: 1,
        page1: 1,
        pageSize: 10,
        uid: "",
      },
      // 智能推荐列表查询
      companyRecommendQuery: {
        jobId: "",
        page: 1,
        pagesize: 10,
        uid: "",
      },
      // 个人详情参数
      personDetail: {
        rid: "",
        uid: "",
      },
      znRecommendDialog: {}, // 智能推荐弹窗内容
      znRecommendContent: {}, // 智能推荐弹窗内容
      // 职位下拉列表
      positionSelect: [],
      intelligenceTjList: [],
      znVisible: false,
      interviewYqVisible: false,
      fullName: "",
      jobList: [],
      InterrviewForm: {
        address: "",
        contact: "",
        interviewDate: "",
        interviewTime: "",
        jobid: null,
        resumeId: null,
        tel: "",
        type: 1,
        note: "",
      },
      rules: {
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        interviewDate: [
          { required: true, message: "请选择面试日期", trigger: "change" },
        ],
        interviewTime: [
          { required: true, message: "请选择面试时间", trigger: "change" },
        ],
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        jobid: [{ required: true }],
        resumeId: [{ required: true }],
        type: [{ required: true }],
      },
    };
  },
  computed: {
    ...mapGetters(["userId", "cid"]),
  },
  async created() {
    // console.log("token", this.$route.query); // 初始获取
    // if (this.$route.query) {
    //   this.$store.commit("user/setJumpQuery", this.$route.query);
    // }
    this.homePageQuery.uid = this.userId;
    this.selHomeResultCountQuery.uid = this.userId;
    this.positionQuery.uid = this.userId;
    this.companyRecommendQuery.uid = this.userId;
    this.resumeSave.uid = this.userId;
    // this.addCollectQuery.personalUid = this.userId;
    this.addCollectQuery.companyUid = this.userId;
    this.delCollectQuery.uid = this.userId;
    this.personDetail.uid = this.userId;
    this.chatJobList.uid = this.userId;
    this.uid=this.userId;
    this.searchHomeDataQuery.uid = this.userId;
    await this.selCompanyMessageByUid();
    this.searchHomeDataQuery.companyId = this.cid;
    this.selHomeMessageByUid();
    this.selCompanyAuditByCid();
    this.selHomeResultCountById();
    // 先调用 positionList 方法
    await this.positionList();
    // 确保 positionList 完成后再调用 companyRecommendList 方法
    this.companyRecommendList();
    this.selCompanyContentList();
  },
  mounted() {
    console.log(this.hireList);
    this.initChart();
  },
  methods: {
    // 招聘统计下拉改变
    getChatJobList(val) {
      console.log(val);
      this.chatJobList.jid = val;
      this.selHomeResultCountById();
    },
    // 是否收到新的投递
    async selIfNewResumeDetailsByCid() {
      const res = await selIfNewResumeDetailsByCidApi(this.cid);
      console.log(res);
    },
    // 面试邀请点击
    async interviewYqClick(row) {
      console.log(row);
      this.interviewYqVisible = true;
      this.InterrviewForm.resumeId = row.id;
      const res = await selRemarkByCidAndRidApi({
        cid: this.cid,
        rid: row.id,
      });
      console.log(res);
    },

    // 面试时间状态改变
    handleInterviewTime(value) {
      if (value) {
        this.InterrviewForm.interviewTime = value;
      }
    },

    // 面试日期状态改变
    handleDateChange(value) {
      if (value) {
        this.InterrviewForm.interviewDate = value;
      }
    },

    // 提交表单
    submitForm() {
      this.$refs.interviewForm.validate(async (valid) => {
        if (valid) {
          // 获取面试日期的时间戳（秒级）
          const interviewDate = new Date(this.InterrviewForm.interviewDate);
          interviewDate.setHours(0, 0, 0, 0);
          const dateTimestamp = Math.floor(interviewDate.getTime() / 1000);

          // 将选择的时间转换为秒数
          const [hours, minutes] = this.InterrviewForm.interviewTime.split(":");
          const timeSeconds = parseInt(hours) * 3600 + parseInt(minutes) * 60;

          // 创建要提交的数据副本
          const submitData = {
            ...this.InterrviewForm,
            interviewDate: dateTimestamp,
            interviewTime: dateTimestamp + timeSeconds,
          };

          const res = await addInterviewApi(submitData);
          if (res.code === 1) {
            this.$message.success("保存成功");
            this.interviewYqVisible = false;
            this.$refs.interviewForm.resetFields();
          } else {
            this.$message.error("该用户不存在");
          }
        }
      });
    },
    // 查询企业联系人列表
    async selCompanyContentList() {
      const res = await selCompanyContentListApi(this.uid);
      this.contactsList = res.data;
      this.InterrviewForm.tel = res.data.companyMobile;
      this.InterrviewForm.contact = res.data.companyContent;
      this.InterrviewForm.address = res.data.companyAddress;
    },
    // 点击收藏
    async toggleStar() {
      // this.isStarred = !this.isStarred; // 切换状态
      try {
        if (this.personDetail.collectStatus === 1) {
          const res = await delCollectApi(this.delCollectQuery);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("取消收藏成功");
            this.personDetail.collectStatus = 0; // 更新收藏状态
          } else {
            this.$message.error("取消收藏失败");
          }
        } else {
          const res = await addCollectApi(this.addCollectQuery);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("收藏成功");
            // this.isStarred = true;
            this.personDetail.collectStatus = 1; // 更新收藏状态
          } else {
            this.$message.error(res.msg);
          }
        }
      } catch (error) {
        console.log(error);
        // this.$message.error("取消收藏成功");
      }
    },
    // 下载简历
    async downloadResume() {
      const res = await resumeSaveApi(this.resumeSave);
      console.log(res);
      if (res.code === 1) {
        this.$message.success("下载简历成功!");
        this.personDetail.downloadStatus = true;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 点击智能推荐
    async resumeClick(candidate) {
      this.znVisible = true;
      this.znRecommendDialog = candidate;
      console.log(candidate);
      this.resumeSave.rid = candidate.id;
      this.addCollectQuery.resumeId = candidate.id;
      this.delCollectQuery.rid = candidate.id;
      this.personDetail.uid = this.userId;
      this.personDetail.rid = candidate.id;
      console.log(this.personDetail);
      const res = await selResumeDetailsByIdApi(this.personDetail);
      console.log(res);
      if (res.code === 1) {
        this.personDetail = res.data;
      } else {
        this.$message.error("获取详情失败");
      }
    },
    // 智能推荐
    async companyRecommendList() {
      // 调用companyRecommendListApi函数，并传入this.companyRecommendQuery作为参数
      const res = await companyRecommendListApi(this.companyRecommendQuery);
      // 输出响应结果
      console.log(res);
      this.intelligenceTjList = res.records;
    },
    // 职位列表
    async positionList() {
      const res = await positionListApi(this.positionQuery);
      console.log(res);
      this.positionSelect = res.records.map((item) => ({
        value: item.id,
        name: item.jobname,
      }));
      console.log(this.positionSelect);
      this.positionSelectValue = this.positionSelect[0].name;
      this.companyRecommendQuery.jobId = this.positionSelect[0].value;
      console.log(this.companyRecommendQuery);
    },
    // 招聘统计
    async selHomeResultCountById() {
      const res = await selHomeResultCountByIdApi(this.chatJobList);
      console.log(res);
      this.hireLists = res.data;
      console.log(this.hireLists);
      // this.hireList = res.data;
      if (res.data && res.data[0]) {
        // 直接使用全局过滤器处理时间戳数组并倒序
        this.hireList = res.data[0]
          .map((timestamp) => this.$options.filters.formatDate(timestamp))
          .reverse();
      }
      console.log(this.hireList);
      this.$nextTick(() => {
        this.initChart();
      });
    },
    async selHomeMessageByUid() {
      const res = await selHomeMessageByUidApi(this.searchHomeDataQuery);
      this.searchHomeDataList = res.data;
      console.log(this.searchHomeDataList);
    },
    async selCompanyMessageByUid() {
      const res = await selCompanyMessageByUidApi(this.userId);
      this.details = res.data;
      console.log(this.details.cid);
      this.$store.commit("user/setCid", this.details.cid);
    },
    async selHomeNoticeByCId() {
      const res = await selHomeNoticeByCIdApi(this.homePageQuery);
    },
    async selCompanyAuditByCid() {
      try {
        const res = await selCompanyAuditByCidApi(this.cid);
        if (res.code === 1) {
          this.$message.success("已认证");
        } else {
          this.$message.error("未认证");
          this.$router.push({
            name: "basic_information",
          });
        }
      } catch {}
    },
    basicDataClick() {
      this.$router.push({
        name: "basic_information",
      });
    },
    // 选择职位下拉
    getCompanyRecommendList(val) {
      console.log(val);
      this.companyRecommendList();
    },
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      const option = {
        xAxis: {
          type: "category",
          data: this.hireList,
          // data: [
          //   "12-10",
          //   "12-11",
          //   "12-12",
          //   "12-13",
          //   "12-14",
          //   "12-15",
          //   "12-16",
          //   "12-17",
          //   "12-18",
          //   "12-19",
          //   "12-20",
          //   "12-21",
          //   "12-22",
          //   "12-23",
          //   "12-24",
          //   "12-25",
          // ],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 2,
          interval: 0.2,
        },
        series: [
          {
            name: "职位浏览",
            type: "line",
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0],
            data: this.hireLists[1],
            itemStyle: { color: "#409EFF" },
          },
          {
            name: "应聘统计",
            type: "line",
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
            data: this.hireLists[2],
            itemStyle: { color: "#F56C6C" },
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
      };
      this.chart.setOption(option);
    },
    // 收到投递
    receive_express() {
      this.$router.push({
        name: "receive_deliver",
      });
    },
    // 我的下载
    myDownload() {
      this.$router.push({
        name: "myDownload",
      });
    },
    // 面试邀请
    interview() {
      this.$router.push({
        name: "interview",
      });
    },
    // 我的收藏
    collect() {
      this.$router.push({
        name: "collect",
      });
    },
    // 浏览记录
    browsing_History() {
      this.$router.push({
        name: "browsing_History",
      });
    },
    // 职位管理
    position_manage() {
      this.$router.push({
        name: "position_manage",
      });
    },
    // 我的积分
    my_points() {
      this.$router.push({
        name: "my_points",
      });
    },
    // 刷新简历
    refresh() {
      this.$confirm("确定刷新所有发布中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "刷新成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消刷新",
          });
        });
    },
    // 一键刷新
    one_click_refresh() {
      this.$confirm("确定刷新所有发布中的职位吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 我的套餐
    my_setMenu() {
      this.$router.push({
        name: "my_setMenu",
      });
    },
  },
};
</script>

<style lang="scss" scope>
.companyIndex {
  display: flex;
  .left_sidebar {
    flex: 1;
    margin-right: 10px;
    .customer_service {
      min-height: 62px;
      border: 1px solid #ebeef5;
      margin-bottom: 18px;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding-left: 90px;
      // 修改这行，添加引号
      background: url("")
        no-repeat 0 #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left_box {
        display: flex;
        align-items: center;
        .portrait {
          width: 44px;
          height: 44px;
          margin-right: 15px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .text_1 {
          color: #333;
          font-size: 18px;
          font-weight: 700;
          margin-right: 14px;
          white-space: nowrap;
        }
        .text_2 {
          color: #999;
          font-size: 12px;
          margin-right: 40px;
          cursor: pointer;
          white-space: nowrap;
        }
      }
      .right_box {
        display: flex;
        align-items: center;
        margin-right: 30px;
      }
    }
    .card {
      display: flex;
      height: 100px;
      justify-content: space-between;
      .cardItem {
        position: relative;
        flex: 1;
        height: 100px;
        padding: 25px 0 0 27px;
        transition: all 0.2s linear;
        color: #fff;
        border-radius: 8px;
        background-color: #0a79eb;
        margin-right: 10px;
        cursor: pointer;
        .i_num {
          font-size: 30px;
          margin-bottom: 2px;
        }
        .i_title {
          font-size: 14px;
        }
        &:after {
          content: "";
          position: absolute;
          right: 15px;
          top: 15px;
          width: 70px;
          height: 70px;
        }
      }
      .i1 {
        background-image: linear-gradient(90deg, #88ebb2, #a1f7bd);
        &:after {
          background: url()
            50% no-repeat;
          background-size: 70px 70px;
        }
      }
      .i2 {
        background-image: linear-gradient(90deg, #69b0ff, #81c8ff);
        &:after {
          background: url()
            50% no-repeat;
          background-size: 70px 70px;
        }
      }
      .i3 {
        background-image: linear-gradient(90deg, #feb6a5, #ffc5b7);
        &:after {
          background: url()
            50% no-repeat;
          background-size: 70px 70px;
        }
      }
      .i4 {
        background-image: linear-gradient(90deg, #ffc893, #ffdcab);
        &:after {
          background: url()
            50% no-repeat;
          background-size: 70px 70px;
        }
      }
      .i5 {
        background-image: linear-gradient(90deg, #8fa9ff, #a4bcff);
        &:after {
          background: url(data:image/png;base64;,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTBGODY2ODMyRkIzMTFFQjgzNjFCMjEwMEM2OEZBQjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTBGODY2ODQyRkIzMTFFQjgzNjFCMjEwMEM2OEZBQjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MEY4NjY4MTJGQjMxMUVCODM2MUIyMTAwQzY4RkFCNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MEY4NjY4MjJGQjMxMUVCODM2MUIyMTAwQzY4RkFCNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoQuOUUAAAqYSURBVHja7JwPbFXVGcC/c+99/U9bWqBV2oKWQoWqrIDYOP/MNMUNBwhuCDHqtuiSLY7FJabbQuOWRRYXY1a3aVZHJurCCnGg0wplMZONqogURpG20KbtCkUYbW1rX9t3z9m57x/nnXfOfffed19bCCc5ue/Pfe/e+7vf953v+853LiKEwLUW3bT8X/uuURA05RoCicRM8fGRxf3I1QwGSWAgC1CQABK5UsEgCRQUA5RMWthtCBZJlFRpkyAZKEY3g8PDkHXX1S5uMH3Vgb+goxt/kQqzDUFQuK0ZHBEUzG1Dr4HZugIobjASICwIhQOiSADJJIYHgiXvEQcqLkCaC2rDq4zCdZXdvrxWXbD0OrgjKxmVpWhwo6bCPBVBjoIg3X/bCYzoBC6N+6B7TIeO/lHS8lEPaXqqAZ/mQOjcFjNQ4lYvlLdtIl4ovJqwIPz91Q1q2YoCtCkzGVZrClzv5GA+DGf7R6HhYBfZ9YO39BNBIHzHAqmS2SLXwYiMqsLB0NKTQNuzWa1aOAttSdZguZvWfXQCPj1+nvx+40690esDw3X3BcH4BJB4MCQRYGRqE5ISQzW1vz6kllcUom1JKpQn0teggJobz5CaJ/boR4NQ2I4lgCzBsQOGhcKrjR/IPTeg9D+sUWtyUuG7kxhu4PPD8Poju/Vnj/WRYfp+QgKINeIx4dgFw0MJdc/vvqkuWluK/uhRYclUxBZUpU7tOIp/WPMP3B6EE+qsDSIC6YkriOQNbdiW0J705ma1Yv1i9M5UQTEaHeFKv7dcefOVdertxjkxXWPOV+RcOgbDG1kWiqfxMXVVRRGqp8Nt9lRHxHTYz/rGIrSD2rgq+jbZOL9gZ+EoVuAoNiWFNbae+ofUlWX5qI5+kTpt8igIUu6ch16ktm4FB0flnEtTOHZUSWElpfZ+teSr89Br0wkKC2ftTahu6z1KSVCdeMlR4lElJPFmtZUFKH0dPTA9gZnTNdFkqNV3lim1JbloBgdGkUiOYxsTkhZt+3r1maQpNLRWW5oHSnduVKsZqdEYqXFkY6Qe7Y4H1WW5afDIlZKivD4TNv3mPuUrJoZYGMhqFm2LX4VSPeC5az7aFvxTS+2LEYCGfwH0nKdOhcO8ezq1YsUFAHfSy8vMsB2/KA8sVrb+rBFvnNCjvGFF5s8oFhy5sMRQf6WK+gu32jmxv38A0NHrHIrRRkYBjlO37c9vA/QP2f99RhLcvP0B9V5OlVSz9EcsG8OqklY6Cz1p96S6+9xTCwNQY5Oz364sRE9wtoZVJVs2JsK+1K1Ty6gqLbN7Qm7P5zmVvsxkuOWZe5UlnMTwdkYKRurQ3VaAvjUdjKkBetTr7LerStAaTp2kw7ZmYVTyk6Uj0Ro3Luzh1QAz0qLTa/sOAXT2Jhbq3ExkhArPcVLjE2QiiSXjSyPnxZoCea5EwWPi7tMTL23U95rzowqlWKBGSiyJEarS0nxY4dbJ7T4wtapYWYxW1DZBm4kHLJUY3vgqM1PRzXCVtLwMWGQiMZb8mLDU0NGo+GoBk5mM5sWQlihVQrKQwOMwsy9qa+4GyM2ytm9rF8ChY+6CoTd5LkRP8fAhAZLZmAjJURV3klCI/tss+k9ZFt36mZnuS4xH9V+LTFLCNsZsuA7vGJoMc8MH2b7X4p1NoQDTA9I1OOzeqKUif/4o5vy5FiOAnNwcCr2PS6lpvJX2vJzLn+sUStc5gMMtAc83noZJlN8ivFYrU7TImDZ1S2pkzVCvDZUA2XR79BTAfurwDVBJ0ejYMXsmQNkCgI2rAt8pcUzM6AS+BAslKJbmrnUMA4qaODBpVG023RcIEl/eDfAl5/IP0Ii6vRug6DqA9TRGTk12fiyqkiNW9rPCnozpcC6R0lJV4RdxqG+MhhIRqdOz2EX3wdj5sUZ9cAEsTLqZgQn/aGQcOhMFJZeOETfdAHDgQ4Cxcc6F90Tv3/s5wLE258cb9JIusFANocSA4p+xuzBCTiYKzIJCgGGq9Z1nIz+/pQTgqYcB8nOjf2MkrZy2nkFoBfGMJDEDw+/o74d7ySeJAmMY24sD0XkbI51p+D0GIGOkmjvn8nf/G3B+vH3t5FOQl4iEXysScWIrmfBP9+PWCezXTdebcfGiZFbIb1m2GODrdwQ8ZohlGGK0MWpf/nQEd4G8jiZ8CE2iRnzdG+4bIu8WZqFH3QZjOG/FhdGfN7cGRiM1mHa/0H/5u5wsZ8fq7CfvQ3SBkbC4yMzGRJR1HThD9iZCYgzbkkkdgaL8yM+N9KUxRJ/qDHRWfcochrR/O0n2gbwCy5KNITwcqk4nh8fBdkiXEsPn6LtIvdn/AlTeTuMYC17VHOoRl5fahzLghZbfNuFWEyhEZmNE9iW09f9ZUzeps3tCt1mYr3zvUCDdaThvyR75fvmzqPdbdVm97Bld/DpARFmaDuLy2IDt4wqH+FxvaPbOuO8pNDJN+2yLVp+RZG961lAJI9ahYQWNSMUGuDAvMKlmeL8ftwR+MzgUDAlyAupjjFBOwgEqLa1ltb7HfdgfDhh91MiyGvYYIguMwoA0M/8FIktHfRM6TOw6gX/1WLnyBrJRSlZSFOhWmjFMf215oLsS0dPzrzuMX6BQQgBYqbGlSjwY1lj5qK053j1A6q+UjF37RbL3+X/jFgEUUXWn5ZAgQmKCfz6+uR4/T8OE1ukOZdALZzbV6y8Z58z0CYHEWIqVpMY3RPzMJTJMLfzTVDyHpisU6pCOPPtP/IveL2CYA2LJ+CqxVTRM1cdKTW0TPv1aM36SRsXe6QZFJzD2YhOufvUo7pBIi0+mQlYcvCgnjwHjh0PtzZF3Wkk1hTM+XaAY57LzOP7lcwdxc3DUGWOgiNRIWN5qKR8jUKeJ0F14fI/+Ph2ptkwHtaLqM/zKJ/jnP2nABxkgItuim0mLP82aUVljK+YT+DzkvXZybnQCPlg+F5UnqZA7RYa2Y+sB/DRV8f8wkuK1AEZYDB2rMty08Jlx/ozXKfOzUcYb31Z+fGMOehBNUjKdXhFpu0jeMkafswFDG5IULycx4xwY05UpdiVGlEAOr0+kHqZv+xHyYbIKH5XORgtTNJidSCj9o9BKJaTm+3vx20Njfo92jLMrrLToYGO5jtW1BKbV4UwPl6p7FEh+YbV6V2UxejQ7xd0Kz0uj8Nm7rfgv1fvxIWrbxgWSwRpbWypkFwwfR0UtshAACm+3VCgLNyxB9xdlo7upFM1xAsPrgwsdl8jBXSfIvpc+xm28+8Bt415k4eqyHE6CQnZIY95rNM6av6oElRdmQkl2KipI80A+DU5naAqk+DN3GLw0JhuinvXnA17S0zMIpxvaSDP1mbp5R5ORhnHOlZjUZTk8HFEdsCqApHGdr39jQYvcBGHMxnUehiwWsryQS7M/CEQsBMcSZ5C9ENUEiqwGjpg4mTwcHRKw9E9zNkJGO5yCO60yYHwcENPCQBM4ugBQQhaLxrO8WDarELpgzIBRBFIiqk1BMfJCVpYXY9mUyGSBEUkP4aRGYbY+SOyCdH7lflwPx3Dj2Q5EolYslMl8hIErTwtx86EXMkCEAYAhcQ+9cPXxKYl4GgiRjGQA7j4mRWTnXGuJfH4MkQzzTh6sYwYqIe3/AgwAU0vxuoJMSrUAAAAASUVORK5CYII=)
            50% no-repeat;
          background-size: 70px 70px;
        }
      }
    }
    .el-card__body {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .companyWarp {
      display: flex;
      margin-bottom: 42px;
      align-items: center;
      .companyVip {
        flex: 8;
        .v_ic_b {
          position: relative;
          float: left;
          width: 20px;
          height: 23px;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 17px;
          }
        }
        .v_ic_tit {
          float: left;
          margin: 0 10px 0 5px;
          font-size: 18px;
          color: #333;
          font-weight: 700;
        }
        .v_ic_date {
          float: left;
          padding-top: 3px;
          font-size: 14px;
          color: #999;
        }
      }
      .companyVipDetailsLInk {
        flex: 1.5;
        padding-left: 20px;
        font-size: 14px;
        color: #ff704f;
        line-height: 23px;
        cursor: pointer;
        background: url()
          0 4px no-repeat;
        white-space: nowrap;
      }
    }
    .companyVipDetails {
      margin: 0px 51px;
      display: flex;
      text-align: center;
      padding-bottom: 50px;
      .DetailsTitle {
        color: #666;
        font-size: 16px;
      }
      .DetailsNumber {
        color: #ff704f;
        font-size: 24px;
        height: 60px;
        padding: 10px 0;
      }
    }
  }
  .right_sidebar {
    width: 320px !important;
    .integral_con {
      width: 320px;
      height: 80px;
      background: #fff;
      border-radius: 7px;
      margin-bottom: 10px;
      position: relative;
      padding-top: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .integral {
        .ic_txt {
          font-size: 14px;
          color: #333;
          padding-left: 40px;
          position: relative;
          margin-bottom: 10px;
          background: url()
            23px no-repeat;
        }
        .ic_tip {
          padding-left: 40px;
          color: #1787fb;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .signIn {
        .integral_btn {
          width: 80px;
          font-size: 14px;
          border: 0;
          padding: 9px 20px;
          position: absolute;
          right: 19px;
          top: 27px;
          color: #a7a7a7;
          background: #f3f3f3;
        }
      }
    }
    .right_cb {
      width: 320px;
      min-height: 395px;
      padding: 25px 25px 28px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .c_name_b {
        display: flex;
        margin-bottom: 15px;
        .c_name {
          float: left;
          max-width: 240px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          a {
            font-size: 16px;
            color: #333;
            text-decoration: none;
          }
        }
      }
      .c_bd {
        display: flex;
        margin-bottom: 15px;
        .b_cell {
          float: left;
          line-height: 16px;
          padding-left: 22px;
          margin-right: 20px;
          font-size: 12px;
          color: #999;
        }
        .tel {
          background: url()
            0 0 no-repeat;
        }
        .wx {
          background: url()
            0 0 no-repeat;
        }
      }
      .c_btn {
        margin-bottom: 35px;
        .adb {
          float: left;
          width: 135px;
          height: 54px;
          padding-top: 16px;
          padding-left: 56px;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          background: url()
            0 0 no-repeat;
          background-size: 139px 54px;
          transition: all 0.2s linear;
        }
        .adj {
          float: right;
          width: 135px;
          height: 54px;
          padding-top: 16px;
          padding-left: 56px;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          background: url()
            0 0 no-repeat;
          background-size: 139px 54px;
          transition: all 0.2s linear;
        }
      }
    }
  }
}
.recommend {
  display: flex;
  align-items: center;
  .recommend_title {
    flex: 8;
    font-size: 18px;
    color: #333;
    padding: 30px 20px 30px 45px;
    font-weight: 700;
    background: url()
      20px 31px no-repeat;
    .t_sub {
      font-size: 14px;
      color: #999;
      font-weight: 400;
    }
  }
  .recommend_select {
    display: flex;
    align-items: center;
  }
}
.recommend_item_con {
  .recommend_item_title {
    font-size: 12px;
    padding: 10px 0;
    color: #a9a9a9;
    .recommend_item_img {
      display: flex;
      width: 280px;
      .item_img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 17px;
        color: #333;
        margin-right: 15px;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .item_text {
        font-size: 17px;
        color: #333;
        margin-right: 15px;
        width: 124px;
        .fn_bar {
        }
        .title {
          padding-top: 7px;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
  .recommend_item_information {
    display: inline-block;
    max-width: 99%; // 可以根据需要调整宽度
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-size: 14px;
    color: #666;
    span {
      color: #999;
      margin-right: 5px;
      font-size: 13px;
    }
  }
  .recommend_item_welfare {
    padding: 10px 0 14px 0;
    border-bottom: 1px solid #f3f3f3;
    span {
      color: #999;
      margin-right: 5px;
      font-size: 13px;
    }
  }
  .recommend_item_company {
    padding: 12px 0 0;
    color: #999;
    font-size: 12px;
  }
}
.complaint {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}
// .b_cell tel {
//       background: url() 0 0 no-repeat;
// }
.resume_show_box {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 45px 22px 60px;
  overflow-y: scroll;
  position: relative;
  .fav_share_box {
    position: absolute;
    z-index: 10;
    top: 48px;
    right: 68px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    .fav {
      display: inline-block;
      width: 18px;
      height: 18px;
      background: url()
        50% no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .close_btn {
    width: 26px;
    height: 26px;
    // background: rgba(97, 104, 124, .1) url(../../static/img/close.ddb7d9ba.png) 50% no-repeat;
    background-size: 15px;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .box_baseinfo {
    .lf {
      img {
      }
      span {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 16px;
        height: 16px;
      }
    }
    .rt {
      .line_1 {
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        .txt1 {
          color: #333;
          font-size: 20px;
          font-weight: 700;
          margin-right: 8px;
        }
        .txt2 {
          font-size: 12px;
          margin-right: 20px;
          position: relative;
          padding-left: 6px;
          .circle {
            display: block;
            width: 4px;
            height: 4px;
            background: #00c48a;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
          }
        }
        .txt3 {
          color: #61687c;
          font-size: 13px;
          margin: 0 5px;
        }
        .txt4 {
          color: #e9ebef;
        }
      }
      .line_2 {
        line-height: 1.5;
        font-size: 13px;
        color: #61687c;
        display: flex;
        align-items: center;
      }
    }
  }
  .box_intention resume_box_item flex {
    margin-bottom: 20px;
    .desc_title {
      font-size: 14px;
      color: #61687c;
      margin-right: 25px;
      width: 60px;
    }
    .resume_box_rt intention_data {
      font-size: 14px;
      color: #61687c;
      .line_1 {
        margin-bottom: 10px;
      }
    }
  }
  .box_contact flex {
    align-items: flex-start;
    margin-bottom: 30px;
    .desc_title {
      font-size: 14px;
      color: #61687c;
      margin-right: 25px;
      width: 60px;
    }
    .contact_wapper {
      background: #f7f9fc;
      border-radius: 4px;
      height: 60px;
      width: 640px;
      padding: 11px 15px;
      .text1 {
        font-size: 14px;
        color: #ff552e;
      }
      .text3 {
        color: #b7bed3;
        margin-top: 6px;
        font-size: 13px;
      }
    }
  }
  .box_intention resume_box_item flex {
    margin-bottom: 20px;
    .desc_title {
      font-size: 14px;
      color: #61687c;
      margin-right: 25px;
      width: 60px;
    }
    .resume_box_rt {
      width: calc(100% - 85px);
    }
    .desc_detial {
      color: #61687c;
      font-size: 14px;
      line-height: 1.5;
    }
  }
  .box_work_experience resume_box_item flex {
    margin-bottom: 20px;
    .desc_title {
      font-size: 14px;
      color: #61687c;
      margin-right: 25px;
      width: 60px;
    }
    .resume_box_rt experience_list {
      width: calc(100% - 85px);
      .experience_item {
        margin-bottom: 15px;
        .line_1 {
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .txt1 {
            color: #61687c;
            font-size: 14px;
            font-weight: 700;
          }
          .line_septal {
            color: #e9ebef;
            margin: 0 8px;
          }
          .time {
            color: #b7bed3;
            font-size: 14px;
          }
        }
        .line_2 {
          color: #61687c;
          .txt1 {
            color: #61687c;
          }
          .txt2 {
            color: #61687c;
          }
        }
      }
    }
  }
}

.resume-dialog {
  .resume-container {
    padding: 20px;
    font-size: 14px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .avatar-info {
      display: flex;
      gap: 15px;
    }

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .basic-info {
      .name-row {
        margin-bottom: 8px;

        .name {
          font-size: 16px;
          font-weight: bold;
          margin-right: 10px;
        }

        .tag {
          background-color: #e8f3ff;
          color: #409eff;
          padding: 2px 8px;
          border-radius: 2px;
          font-size: 12px;
          margin-right: 10px;
        }

        span {
          margin-right: 10px;
          color: #666;
        }
      }

      .status {
        color: #666;
      }
    }

    .actions {
      color: #999;
      font-size: 18px;

      i {
        margin-left: 15px;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }
      }
      .fav {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url()
          50% no-repeat;
        background-size: 100% 100%;
        margin-right: 20px;
        cursor: pointer;
      }
      .fav-uncollected {
        background: url()
          50% no-repeat;
        background-size: 100% 100%;
      }
      .fav-collected {
        background: url()
          50% no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .section {
    display: flex;
    margin-bottom: 20px;
    .title {
      margin-right: 25px;
      font-weight: bold;
      margin-top: 3px;
      margin-bottom: 12px;
    }

    .content {
      display: flex;
      flex-direction: column;
      color: #666;
      line-height: 1.6;
      width: calc(100% - 85px);
      .item {
        margin-bottom: 8px;
      }
    }
  }
  .contact-section {
    background: #f7f9fc;
    border-radius: 4px;
    height: 60px;
    width: 640px;
    padding: 11px 15px;
  }
  .contact-row {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
  }

  .contact-tip {
    color: #999;
    font-size: 13px;
  }

  .work-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .company-info {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
    .company {
      font-weight: bold;

      .position {
        margin-left: 10px;
        font-weight: normal;
        color: #666;
      }
    }

    .date {
      color: #999;
    }
  }

  .work-content {
    p {
      margin: 8px 0;
      line-height: 1.6;
    }
  }

  .dialog-footer {
    text-align: right;
    // display: flex;
    // justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;

    .left-actions,
    .right-actions {
      display: flex;
      gap: 10px;
    }
  }
}

.collect {
  background-color: #ff562e !important;
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.el-dialog__header) {
  padding: 0;
}

:deep(.el-dialog__headerbtn) {
  z-index: 10;
}
</style>
